<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车效果-训练transition的应用</title>

		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				background: blue;
				font-family: "microsoft yahei";
				line-height: 2em;
				margin: 30px;
				color: white;
			}
			
			pre {
				font-family: "microsoft yahei";
				margin: 30px;
			}
			
			nav {
				width: 120px;
				height: 40px;
				background: #ccc;
				margin-left: 300px;
				position: relative;
			}
			
			nav a {
				display: block;
				width: 100%;
				height: 100%;
				transition: 0.1s 1s;
				text-align: center;
				line-height: 40px;
				/*鼠标移开*/
			}
			
			nav:hover a {
				transition: 0.1s;
				/*鼠标越过*/
				background: white;
				color: #ff4400;
			}
			
			.sub {
				position: absolute;
				right: 0px;
				width: 300px;
				height: 0px;
				background: white;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
				transition: 1s;
				overflow: hidden;
				color: blue;
			}
			
			nav:hover .sub {
				height: 150px;
			}
		</style>
	</head>

	<body>
		<h2>本案例目的：训练css3 transition动画的高级实战能力</h2>
		<pre>
动画特点：鼠标放上去购物车背景立即改变，鼠标移开后等弹出的菜单收缩完毕购物车背景才消失
考点：transition的语法结构？
难点：transition的二次利用
使用方法：把鼠标放到，购物车几个字上
</pre>
		<nav>
			<a href="###">购物车</a>
			<div class="sub">
				子菜单
			</div>
		</nav>
	</body>

</html>